<template>
  <div>
    <!-- Tab切换 -->
    <div ref="nav" class="tab-box">
      <div class="tab-big">
        <div class="tab" ref="tabs" v-for="item, index in TabList" :key="index" @click="changeTab(index, item.id)"
          :class="{ active: currentIndex === index, tab1: TabList.length - 1 === index }">{{ item.title }}</div>
      </div>
      <i class="iconfont icon2" v-show="tabindex === 1">&#xe617;</i>
    </div>
    <!-- tab栏的空位 -->
    <div class="box"></div>
    <!-- Swiper容器 -->
    <div class="swiper-container" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd">
      <div ref="swiperWrapper" class="swiper-wrapper">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    // tab栏数据
    TabList: {
      type: Array,
      required: true
    },
    // 判断是首页还是动态
    tabindex: {
      type: Number,
      // 默认为首页
      default: 0
    }
  },
  data() {
    return {
      currentIndex: 0,
      startX: 0,
      moveX: 0,
      isTouching: false,
    };
  },
  methods: {
    // 切换Tab
    changeTab(index) {
      // 切换Tab时更新当前索引
      this.currentIndex = index;
      // 传给父组件用来请求接口
      this.$emit('changeTab', this.currentIndex + 1)
      // 计算滚动位置以使单击的选项卡居中
      const nav = this.$refs.nav; // 获取选项卡导航栏的引用
      const tab = this.$refs.tabs[index]; // 获取当前选中的选项卡的引用
      const scrollLeft = tab.offsetLeft - (nav.clientWidth - tab.clientWidth) / 2;  // 计算滚动左侧位置以居中当前选项卡
      //       const img = document.querySelectorAll('.swiper-slide')
      // console.log(img[index]);
      //       img[index].style.transition = 'all 1s ease'
      nav.scrollLeft = Math.max(0, Math.min(scrollLeft, nav.scrollWidth - nav.clientWidth));  // 设置滚动位置，确保在合理的范围内
    },
    onTouchStart(event) {
      this.isTouching = true;
      this.startX = event.touches[0].clientX;
      this.moveX = 0;
      // console.log(this.startX);
    },
    onTouchMove(event) {
      if (!this.isTouching) return;
      this.moveX = event.touches[0].clientX - this.startX;
    },
    onTouchEnd() {
      if (!this.isTouching) return;
      this.isTouching = false;
      const threshold = 50; // 设置滑动切换的阈值
      if (this.moveX > threshold && this.currentIndex > 0) {
        this.changeTab(this.currentIndex - 1);
      } else if (this.moveX < -threshold && this.currentIndex < this.TabList.length - 1) {
        this.changeTab(this.currentIndex + 1);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
$width: 100%;

/* 样式Start... */
.tab-box {
  background-color: #fff;
  z-index: 10;
  position: fixed;
  top: 0;
  left: 0;
  width: 94%;
  height: 50px;
  overflow-x: scroll;
  margin-top: 72px;
  margin-left: 3%;

  &::-webkit-scrollbar {
    display: none;
  }

  .tab-big {
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    color: #999;

    .tab,
    .tab1 {
      text-align: center;
      height: 46px;
      line-height: 46px;
      font-size: 17px;
      font-weight: 550;
      float: left;
    }

    .tab1 {
      margin-right: 0px !important;
      float: right;
    }
  }
}


.icon2 {
  position: absolute;
  right: 0;
  top: 0;
  margin-top: 15px;
  margin-right: 20px;
}

.box {
  height: 54px;
}

.active {
  border-bottom: 4px solid #969696;
  color: #555;
}

.swiper-container {
  width: 100%;
  overflow: hidden;
  position: relative;
  touch-action: pan-y;
}

.swiper-wrapper {
  // padding-top: 80px;
  // display: flex;
  transition: transform 0.3s ease-in-out;
}


.swiper-slide {
  flex: 0 0 100%;
  box-sizing: border-box;
}

/* 样式End... */
</style>
